<template>
  <div>
    <!-- 单选按钮 -->
    <div class="mb-4">
      <el-radio-group v-model="selectedOption" size="large">
        <el-radio-button label="rank">位次分析</el-radio-button>
        <el-radio-button label="score">最低分</el-radio-button>
        <el-radio-button label="scoreDiff">最低分线差</el-radio-button>
        <el-radio-button label="admission">录取人数</el-radio-button>
      </el-radio-group>
    </div>

    <!-- 图表容器 -->
    <div ref="chartRef" style="width: 1000px; height: 300px;"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted, watch } from 'vue';

const chartRef = ref(null);
const selectedOption = ref('rank'); // 默认选中位次分析

// 模拟数据
const yearData = ['2022', '2023', '2024'];
const rankData = [320, 310, 305]; // 录取位次
const scoreData = [650, 655, 660]; // 最低分
const scoreDiffData = [20, 15, 10]; // 最低分线差
const admissionData = [200, 220, 250]; // 录取人数

// 初始化图表
onMounted(() => {
  const myChart = echarts.init(chartRef.value);
  updateChart(myChart);

  // 监听窗口大小变化，自动调整图表大小
  window.addEventListener('resize', myChart.resize);
});

// 监听选项变化，更新图表
watch(selectedOption, (newVal) => {
  const myChart = echarts.init(chartRef.value);
  updateChart(myChart);
});

function updateChart(myChart) {
  let yAxisLabel = '';
  let seriesData = [];
  let color = '';

  switch (selectedOption.value) {
    case 'rank':
      yAxisLabel = '录取位次';
      seriesData = rankData;
      color = '#1f77b4'; // 绿线表示录取位次
      break;
    case 'score':
      yAxisLabel = '分数';
      seriesData = scoreData;
      color = '#ff7f0e'; // 橙色线表示最低分
      break;
    case 'scoreDiff':
      yAxisLabel = '分数差';
      seriesData = scoreDiffData;
      color = '#2ca02c'; // 绿色线表示最低分线差
      break;
    case 'admission':
      yAxisLabel = '人数';
      seriesData = admissionData;
      color = '#d62728'; // 红色线表示录取人数
      break;
  }

  const option = {
    title: {
      text: '历年录取情况'
    },
    xAxis: {
      type: 'category',
      data: yearData
    },
    yAxis: {
      type: 'value',
      name: yAxisLabel
    },
    series: [
      {
        data: seriesData,
        type: 'line',
        smooth: true,
        itemStyle: {
          color: color
        }
      }
    ]
  };

  myChart.setOption(option);
}
</script>

<style scoped>
/* 添加样式 */
</style>
